<template>
	<view style="background-color: #e1e1e1;height: 100%;">
		<view class="uni-comment" style="background-color: white;padding: 0 12px;">
			<view class="uni-comment-list">
				<view class="uni-comment-face">
					<image :src="comment.user.avatar != null ? comment.user.avatar : 
						'http://thirdqq.qlogo.cn/g?b=oidb&k=gfX9ZPWk6sACVCzibNY5fnw&s=140&t=1558407034'"
					 mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>{{comment.user.name}}</text>
					</view>
					<view class="uni-comment-content">
						<text selectable="true">{{comment.content}}</text>
					</view>
					<view class="uni-comment-date">
						<view>{{comment.time}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论区 start -->
		<view class="uni-comment" style="margin: 15px 15px;margin-bottom: 60px;padding: 10px;padding-bottom: 0;background-color: white;">
			<view class="uni-comment-list" v-for="(item, index) in comments" :key="index">
				<view class="uni-comment-face">
					<image :src="item.user.avatar != null ? item.user.avatar : 
					'http://thirdqq.qlogo.cn/g?b=oidb&k=gfX9ZPWk6sACVCzibNY5fnw&s=140&t=1558407034'"
					 mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>{{item.user.name}}</text>
					</view>
					<view class="uni-comment-content">
						<text selectable="true">{{item.content}}</text>
					</view>
					<view class="uni-comment-date">
						<view>{{item.time}}</view>
						<view class="uni-comment-replay-btn" @click="reply(item.id)">{{item.count}}回复</view>
					</view>
				</view>
			</view>
			<uni-load-more :contentText="contentText" :status="status"></uni-load-more>
		</view>
		<!-- 评论区 end -->
		<!-- 评论框 start -->
		<view style="position: fixed;bottom: 0;width: 100%">
			<uni-search-bar radius="100" placeholder="想对Ta说点什么..." cancelText="发送"
			 clearButton="auto" @confirm="send" @cancel="send" />
		</view>
		<!-- 评论框 end -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	var _self;
	
	export default {
		data() {
			return {
				comment: {},
				comments: [],
				cId: 0,
				pId: 0,
				page: 1,
				size: 10,
				status: 'more', // 列表的状态 more还有更多 loading正在加载 noMore没有了
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多评论了"
				}
			}
		},
		components: {
			uniSearchBar,
			uniLoadMore
		},
		methods: {
			getCommonsList() {
				uni.request({
					url: _self.websiteUrl + '/commentarticle/select/comment/page',
					method: 'GET',
					data: {
						page: _self.page,
						size: _self.size,
						cId: _self.cId
					},
					success: res => {
						_self.comments = _self.comments.concat(res.data.payload.records)
						const data = res.data.payload
						if (data.current >= data.pages) {
							_self.status = 'noMore'
						} else {
							_self.status = 'more'
						}
					},
					fail: () => {
						_self.status = 'noMore'
					}
				});
			},
			getNowCommon(id) {
				uni.request({
					url: _self.websiteUrl + '/commentarticle/select/comment/' + id,
					method: 'GET',
					success: res => {
						_self.comment = res.data.payload
					},
					fail: () => {
						uni.reLaunch({
							url: '../index'
						})
					},
				});
			},
			reply(id) {
				uni.navigateTo({
					url: './littleknowCommon?id=' + id + '&pId=' + _self.pId
				});
			},
			send(res) {
				let token = uni.getStorageSync("token").token
				if (token === null || token === undefined || token === '') {
					uni.showToast({
						title: '还没登录哦!', 
						icon: 'none', 
						image: '../../../static/error.png' ,
					});
					return;
				}
				uni.showLoading({
					title: '正在评论呢...'
				})
				uni.request({
					url: _self.websiteUrl + '/commentarticle/comment',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						token: uni.getStorageSync("token").token,
						content: res.value,
						pId: _self.pId,
						cId: _self.cId
					},
					success: (t) => {
						uni.hideLoading()
						uni.showToast({
							title: '评论成功!'
						})
						_self.comments.unshift(t.data.payload)
					},
					fail: (t) => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: t.msg
						})
					}
				})
			}
		},
		onLoad(option) {
			_self = this;
			_self.cId = option.id;
			_self.pId = option.pId
			
			this.getNowCommon(_self.cId)
			this.getCommonsList();
		},
		onPullDownRefresh() {
			// 下拉刷新
			_self.comments = []
			_self.page = 1;
			this.getCommonsList()
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			// 监听是否滑倒页面底部，滑到就去加载新的一页新闻列表
			_self.status = 'loading';
			_self.page++
			_self.getCommonsList();
		},
	}
</script>

<style>

</style>
